<template>
  <section>
      <div class="panel">
        <div class="right">
          <div class="title">
            <h1>{{webCfg.title}} <span class="version">{{webCfg.version}}</span></h1>
            <h3>{{webCfg.titleEn}}</h3>
          </div>

          <div class="form">
            <el-form :model="form" :rules="rules" ref="form" label-width="60px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" prefix-icon="el-icon-user" class="noBlueBg"
                          placeholder="请输入用户名" autofocus="true" clearable></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" show-password prefix-icon="el-icon-lock" class="noBlueBg"
                          @keyup.enter.native="login('form')"
                          placeholder="请输入密码" clearable></el-input>
              </el-form-item>


              <el-form-item>
                <el-button @click="login('form')" :disabled="clicked">登 录</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="copyright">
            <a :href="webCfg.copyRight.url" target="_blank">{{webCfg.copyRight.company }}</a><br>
            版权所有&技术支持 ©{{ webCfg.copyRight.year}}
          </div>

        </div>
      </div>
  </section>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        webCfg: WebCfg,
        clicked: false,
        form: {
          username: '',
          password: '',
          grant_type: 'password',
          client_id: 'client_id',
          client_secret: 'milujk2022',
          scope: ''
        },
        rules: {
          username: [
            {required: true, message: '用户名不能为空！', trigger: 'change'}
          ],
          password: [
            {required: true, message: '密码不能为空！', trigger: 'change'}
          ]
        },
      }
    },
    mounted() {
      this.showPanel = !!1;
    },
    methods: {
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.$kkui.cache.get('user')){
              this.$kkui.msg({
                icon: 0,
                cont: '已有用户在其他标签页登录！无需重复登录！'
              });
              return false;
            }



            this.clicked = true;
            this.$server('user.login', {
              username: this.form.username,
              password: this.$kkui.str2Hex(this.form.password)
            }, 1).then(info => {
              this.$kkui.cache.set('user', info);
              this.$store.commit('renewUserInfo', info);

              Promise.all([this.$server('globalDict'), this.$server('company.getName')]).then(rst => {
                let newDict = {event: {}};
                rst[0].forEach(item => {
                  if (['camera', 'road', 'status', 'cameraGroup', 'repairCode', 'center', 'identity'].indexOf(item.name) > -1) {
                    newDict[item.name] = {};
                    item.data.forEach(itm => {
                      newDict[item.name][itm.type] = itm.name;
                    })
                  } else if('trafficDict'.indexOf(item.name) > -1){
                    console.log(item.data);
                    newDict[item.name] = item.data[0];
                  } else {
                    item.data.forEach(itm => {
                      newDict['event'][itm.type] = itm.name;
                    })
                  }
                });

                this.$kkui.cache.set('dict', newDict);
                this.$kkui.cache.set('unit', rst[1]);

                this.$router.push({path:'/'});


                newDict = null;
              });
            }).catch(() => {
              this.clicked = false;
            });
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/login.scss";
</style>
